<template>
    <div style="margin: 0 auto;width:300px;height:80px;margin-top: 300px;">
        <div class="login-div" style="margin: auto 0">
            <div class="kuang"><span class="kuang-left">用户名：</span>语不惊人死不休</div>
            <div class="kuang"><span class="kuang-left">密&nbsp;&nbsp;&nbsp;码：</span>*********</div>
            <div id="login-btn" @click="loginBtn"><button>登录</button></div>
            <div id="captcha-div"></div>
        </div>
    </div>
</template>

<script>
import "@/assets/captcha/css/tac.css" // 验证码css
import "@/assets/captcha/js/jquery.min.js"; // 验证码js
import "@/assets/captcha/js/tac.min.js"; // 验证码js

export default {
  name: 'Login',
  data() {
    return {
    }
  },
  methods: {
    loginBtn() {
        // 样式配置
        const config = {
            requestCaptchaDataUrl: "https://wenle.zilanxuan.cn/gen/RANDOM",
            validCaptchaUrl: "https://wenle.zilanxuan.cn/check",
            bindEl: "#captcha-div",
            // 验证成功回调函数
            validSuccess:(res,c,tac)=> {
                this.login();
                tac.destroyWindow();
            }
        }
        new window.TAC(config).init();
    },
    login() {
        alert("登录成功")
    }

  }
}
</script>
<style>

</style>